<template>
	<uni-search-bar @confirm="toSearch" placeholder="请输入公交地铁线路" v-model="searchKey" />
	<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item v-for="item in lunboList" :key="item.objectId">
			<view class="swiper-item">
				<image style="width: 100%; height: 100%;" :src="item.url" mode="aspectFill" />
			</view>
		</swiper-item>
	</swiper>
	<view class="tq">
		<image :src="weatherIcon" mode=""></image>
		<text class="wendu">{{ temperature }}°C</text>
		<text class="tianqi">{{ weatherDescription }}</text>
		<text class="shidu">{{windDir}}{{ windSpeed }}级</text>
		<view class="dll1">
			<text class="tigan">湿度：{{ humidity }}%</text>
			<text>体感温度：{{ feelsLike }}°C</text>
		</view>
	</view>
	<view class="section-title">旅游服务</view>
	<view class="travel-grid">
		<view class="grid-item" v-for="(item, index) in travelIcons" :key="index" @tap="handleIconClick(item)">
			<image :src="item.icon" mode="aspectFill"></image>
			<text>{{item.text}}</text>
		</view>
	</view>
	<view class="section-title">认识西安</view>
	<view class="video-container">
		<video id="myVideo" :src="videoSrc" :poster="videoPoster" style="width: 100%; height: 100%;" object-fit="cover"
			:controls="true" :show-fullscreen-btn="true" :show-center-play-btn="true" :show-play-btn="true"
			:show-progress="true"></video>
	</view>
	<view class="section-title">游玩</view>
	<view class="scenic-list">
		<view class="item" v-for="(item,index) in seniclist" :key="index" @tap="toDetails(item.objectId)">
			<view class="pic">
				<image :src="item.img" mode="aspectFill"></image>
			</view>
			<view class="msg">
				<view class="name">{{item.name}}</view>
				<view class="intro">{{item.intro}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onHide,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"
	import {
		userStore
	} from "../store/userStrore.js"

	const store = userStore()

	const searchKey = ref("")
	const lunboList = ref([])
	const temperature = ref("")
	const weatherIcon = ref("")
	const weatherDescription = ref("")
	const humidity = ref("")
	const windSpeed = ref("")
	const feelsLike = ref("")
	const windDir = ref("")
	const seniclist = ref([])

	const travelIcons = [{
			icon: '/static/icon/dianying.png',
			text: '热映电影'
		},
		{
			icon: '/static/icon/remenjingdian.png',
			text: '风启图床'
		},
		{
			icon: '/static/icon/gongneng.png',
			text: '个人网站'
		},
		{
			icon: '/static/icon/a-031_liwufuli.png',
			text: '每日运势'
		},
		{
			icon: '/static/icon/tianqi.png',
			text: '天气预报'
		},
		{
			icon: '/static/icon/jingdian.png',
			text: '景点'
		},
		{
			icon: '/static/icon/glicondibiao.png',
			text: '我在哪里 '
		},
		{
			icon: '/static/icon/shangdian.png',
			text: '我在哪里'
		},
		{
			icon: '/static/icon/chaxun.png',
			text: '公交查询'
		},
		{
			icon: '/static/icon/a-iconwenwuguji.png',
			text: '长安八景'
		},
		{
			icon: '/static/icon/liebiao.png',
			text: '自选功能'
		},
		{
			icon: '/static/icon/zixuan.png',
			text: '自选功能'
		}
	]

	function toSearch() {
		if (searchKey.value == "") {
			uni.showToast({
				title: "请输入查询的公交线路",
				icon: "none"
			})
		} else {
			window.location.href = `https://uri.amap.com/line?name=${searchKey.value}&city=029&src=mypage&callnative=0`
		}
	}

	async function getLunbo() {
		try {
			let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/Lunbo")
			console.log("轮播图响应：", res)
			if (res.statusCode == 200) {
				lunboList.value = res.data.results
				console.log("轮播图数据：", lunboList.value)
			}
		} catch (error) {
			console.error("获取轮播图失败：", error)
		}
	}

	const getCurrentPos = () => {
		try {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude)
					console.log('当前位置的纬度：' + res.latitude)
					if (store && store.setCurrentPos) {
						store.setCurrentPos({
							latitude: res.latitude,
							longitude: res.longitude
						})
					} else {
						// console.error('store or setCurrentPos not available')
					}
				},
				fail: (err) => {
					console.error('获取位置失败：', err)
				}
			})
		} catch (error) {
			console.error('getCurrentPos error:', error)
		}
	}

	async function getWeather() {
		try {
			const url = `${CONFIG.hefeng_now}?location=${CONFIG.hefeng_location}&key=${CONFIG.hefeng_key}`
			let res = await uni.$get(url)
			console.log("天气响应：", res)
			if (res.statusCode == 200) {
				const weatherData = res.data.now
				temperature.value = weatherData.temp
				weatherIcon.value = `/static/weather/${weatherData.icon}.png`
				weatherDescription.value = weatherData.text
				humidity.value = weatherData.humidity
				windSpeed.value = weatherData.windScale
				feelsLike.value = weatherData.feelsLike
				windDir.value = weatherData.windDir
			}
		} catch (error) {
			console.error("获取天气失败：", error)
		}
	}

	const videoSrc = ref('http://spa7pzx4w.hn-bkt.clouddn.com/400729002-1-208%281%29.mp4')
	const videoPoster = ref('http://spa7pzx4w.hn-bkt.clouddn.com/spfm2.png')

	let videoContext = null

	onLoad(() => {
		getLunbo()
		getCurrentPos()
		getWeather()
		videoContext = uni.createVideoContext('myVideo')
		getSenic()
	})

	onHide(() => {
		if (videoContext) {
			videoContext.pause()
		}
	})

	onUnload(() => {
		if (videoContext) {
			videoContext.stop()
		}
	})

	function handleIconClick(item) {
		switch (item.text) {
			case '热映电影':
				uni.navigateTo({
					url: '/pages/HotMovies/HotMovies'
				})
				break
			// case '风启图床':
			// 	uni.navigateTo({
			// 		url: '/pages/fengqituchuang/fengqituchuang?url=' + encodeURIComponent(
			// 			'https://img.mcfengqi.icu/#/')
			// 	})
			// 	break
			// case '个人网站':
			// 	uni.navigateTo({
			// 		url: '/pages/mcfengqi/mcfengqi?url=' + encodeURIComponent('https://mcfengqi.icu/')
			// 	})
			// 	break
			case '每日运势':
				uni.navigateTo({
					url: '/pages/yunshi/yunshi'
				})
				break
			case '天气预报':
				uni.navigateTo({
					url: '/pages/weather/weather'
				})
				break
		}
	}
	
		async function getSenic() {
			let query = {
				"type": "4"
			}
			let queryStr = JSON.stringify(query)
			let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/senicltem", {
				where: queryStr
			})
			if (res.statusCode == 200) {
				seniclist.value = res.data.results
			}
		}
		
		function toDetails(id) {
			uni.navigateTo({
				url: "/pages/playDetails/playDetails?id=" + id
			})
		}
</script>
<style lang="scss" scoped>
	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.tq {
		margin: 10px;
		padding: 15px;
		border-radius: 12px;
		background-color: #fff;
		border: 1px solid #000;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 60px;
			height: 60px;
		}

		.wendu {
			font-size: 28px;
			font-weight: bold;
		}

		.tianqi {
			font-size: 18px;
		}

		.shidu {
			font-size: 16px;
		}

		.dll1 {
			display: flex;
			flex-direction: column;
			font-size: 16px;
			gap: 5px;
		}
	}

	.travel-grid {
		margin: 10px;
		height: 140px;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 10px;
		border: 1px solid #000;
		border-radius: 12px;
		padding: 10px;

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 35px;
				height: 35px;
				margin-bottom: 5px;
			}

			text {
				font-size: 12px;
			}
		}
	}

	.video-container {
		margin: 10px;
		height: 200px;
		border-radius: 12px;
		overflow: hidden;
		border: 1px solid #000;

		video {
			border-radius: 12px;
		}
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		padding: 15px 12px 5px;
		position: relative;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			position: relative;
			width: 3px;
			height: 18px;
			background-color: #ff2756;
			border-radius: 2px;
			margin-right: 8px;
			display: inline-block;
		}
	}
	.scenic-list {
		margin: 10px;
		
		.item {
			margin-bottom: 10px;
			padding: 10px;
			border-radius: 12px;
			border: 1px solid #000;
			display: flex;
			gap: 15px;
			
			.pic {
				width: 120px;
				height: 90px;
				border-radius: 8px;
				overflow: hidden;
				
				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			
			.msg {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 5px 0;
				
				.name {
					font-size: 16px;
					font-weight: bold;
					color: #333;
				}
				
				.intro {
					font-size: 14px;
					color: #666;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}
	}
</style>